<template>
  <div>
    <div v-if="zoneNumber > 1">
      <!--分区-->
      <ul class="clearfix">
        <li class="area" 
          v-for="(item,index) in 4" :key="item" 
          v-bind:class="{active:index == areaIndex}" 
          @click="handleActive(index)">
          {{index+1}}/4区
        </li>
      </ul>
    </div>
    <!--轮次-->
    <ul class="round clearfix">
      <li class="round" 
        v-for="item in roundList" :key="item"
        v-bind:style="{width: (1/roundList.length *100)+'%'}">
        {{item}}
      </li>
    </ul>

    <div class="clearfix check-tb">        
      <ul class="fl" v-for="(item,$index) in dataList" :key="$index" v-bind:style="{width: (1/dataList.length *100)+'%'}">
        <li v-for="game in item.matchScheduleResp" :key="game.id" class="relative game-item center">

          <div class="player-item">
            <!--淘汰赛第一轮轮空-->
            <p class="player" v-if="!isCup && !game.guestUserName.length && item.grade ==1">
              <span class="seed-number" v-if="!isCup && game.hostSeedValue && game.hostSeedValue!=10000">
                {{game.hostSeedValue || ''}}
              </span>
              <span v-bind:class="{champion:item.grade == playRound && (Number(game.homeScore) > Number(game.guestScore))}">
                {{(game.hostUserName + (game.hostUserName2 ? '&' + game.hostUserName2 : '' )) || (game.hostUserId=='pending'?'待定':game.hostUserId) }}<span v-if="!IsCupSeperate">(轮空)</span>
              </span>
            </p>
            <p class="player" v-else>
              <span class="seed-number" v-if="!isCup && game.hostSeedValue && game.hostSeedValue!=10000">
                {{game.hostSeedValue || ''}}
              </span>
              <span v-bind:class="{champion:item.grade == playRound && (Number(game.homeScore) > Number(game.guestScore))}">
                {{(game.hostUserName + (game.hostUserName2 ? '&' + game.hostUserName2 : '' ))|| (game.hostUserId=='pending'?'待定':game.hostUserId)}} 
              </span>
            </p>
          </div>

          <div class="vs vs-region">
            <p v-if="game.status < 2 && ((game.hostUserName || game.hostUserId ) && ( game.guestUserName || game.guestUserId)) ">
              vs
            </p>
            <p v-if="game.homeScore && game.guestScore">
              {{game.homeScore+ '：' + game.guestScore}}
            </p>
            <p v-if="game.status == 4">
              已取消
            </p>
          </div>
          
          <div class="player-item">                 
            <p class="player">
              <span class="seed-number" v-if="!isCup && game.guestSeedValue && game.guestSeedValue!=10000">
                {{game.guestSeedValue || ''}}
              </span>
              <span v-bind:class="{champion:item.grade == playRound && (Number(game.homeScore) < Number(game.guestScore))}">
                {{(game.guestUserName + (game.guestUserName2 ? '&' + game.guestUserName2 : '' )) || (game.guestUserId=='pending'?'待定':game.guestUserId)}}
              </span>
            </p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import {IsCupSeperate} from 'utils'
export default {
  props: {
    dataList: {
      type: Array,
      default: []
    },
    roundList: {
      type: Array
    },
    zoneNumber: {
      type: Number
    },
    areaIndex: {
      type: Number
    },
    isCup: {
      type: Boolean,
      default: false
    },
    playRound: Number
  },
  computed: {
    ...mapGetters({
      race_detail: 'race_detail'
    }),
    IsCupSeperate () {
      return IsCupSeperate(this.race_detail)
    }
  },
  data () {
    return {}
  },
  methods: {
    handleActive (i) {
      this.$emit('active', i)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../../styles/checktable.scss';
.vs-region{
  min-height: 20px;
}
</style>
